<template>
  <div id="mainCon" class="s-con">
    <!-- 同一类别订单 S -->
    <div class="itme-con">
      <!-- 同一类别订单头部 S -->
      <div class="item-hd">
        <van-row>
          <van-col span="2">
            <div class="item-hd-con">
              <van-checkbox-group v-model="result">
                <van-checkbox v-for="(item, index) in list" :key="index" :name="item">
                  <img
                    slot="icon"
                    slot-scope="props"
                    :src="props.checked ? icon.active : icon.normal"
                  >
                </van-checkbox>
              </van-checkbox-group>
            </div>
          </van-col>
          <van-col span="22">
            <div class="flex-space-between item-hd-box">
              <div class>JD 京东自营店</div>
              <div>优惠券</div>
            </div>
          </van-col>
        </van-row>
      </div>
      <!-- 同一类别订单头部 E -->
      <!-- 订单列表头部 S -->
      <div class="item-bd-li-hd">
        <van-row>
          <van-col offset="2" span="22">
            <div class="flex-space-between item-bd-li-box">
              <div class>已购满99元，已减20元</div>
              <div class="red">再逛逛</div>
            </div>
          </van-col>
        </van-row>
      </div>
      <!-- 订单列表头部 E -->
      <!-- 订单列表 S -->
      <div class="item-bd">
        <div class="item-bd-li">
          <div class="item-bd-li-con">
            <van-row class="flex-space-between align-items-center">
              <van-col span="2">
                <van-checkbox-group v-model="result">
                  <van-checkbox v-for="(item, index) in list" :key="index" :name="item">
                    <img
                      slot="icon"
                      slot-scope="props"
                      :src="props.checked ? icon.active : icon.normal"
                    >
                  </van-checkbox>
                </van-checkbox-group>
              </van-col>
              <van-col span="22">
                <van-row>
                  <div class="flex-space-between pro-box">
                    <van-col span="6" class="img-wrap">
                      <img
                        src="https://m.360buyimg.com/babel/s268x268_jfs/t21064/86/2367874944/240021/6f967036/5b516f1bN4f4a3a7a.jpg!q70.dpg"
                        alt
                      >
                    </van-col>
                    <van-col span="18" class="pro-con flex-column flex-space-between">
                      <div class="pro-tit">HOO男童卫衣长袖T恤纯棉圆领上衣中大童字母打底衫儿童套头男童加绒卫衣 单层深蓝 160</div>
                      <div class="flex-space-between pro-info">
                        <div class="price">
                          ￥
                          <span class="num">129.00</span>
                        </div>
                        <div class="quantity">
                          <van-stepper v-model="value"/>
                        </div>
                      </div>
                    </van-col>
                  </div>
                </van-row>
              </van-col>
            </van-row>
          </div>
        </div>
        <div class="item-bd-li">
          <div class="item-bd-li-con">
            <van-row class="flex-space-between align-items-center">
              <van-col span="2">
                <van-checkbox-group v-model="result">
                  <van-checkbox v-for="(item, index) in list" :key="index" :name="item">
                    <img
                      slot="icon"
                      slot-scope="props"
                      :src="props.checked ? icon.active : icon.normal"
                    >
                  </van-checkbox>
                </van-checkbox-group>
              </van-col>
              <van-col span="22">
                <van-row>
                  <div class="flex-space-between pro-box">
                    <van-col span="6" class="img-wrap">
                      <img
                        src="https://m.360buyimg.com/babel/s268x268_jfs/t21064/86/2367874944/240021/6f967036/5b516f1bN4f4a3a7a.jpg!q70.dpg"
                        alt
                      >
                    </van-col>
                    <van-col span="18" class="pro-con flex-column flex-space-between">
                      <div class="pro-tit">HOO男童卫衣长袖T恤纯棉圆领上衣中大童字母打底衫儿童套头男童加绒卫衣 单层深蓝 160</div>
                      <div class="flex-space-between pro-info">
                        <div class="price">
                          ￥
                          <span class="num">129.00</span>
                        </div>
                        <div class="quantity">
                          <van-stepper v-model="value"/>
                        </div>
                      </div>
                    </van-col>
                  </div>
                </van-row>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
      <!-- 订单列表 S -->
    </div>
    <!-- 同一类别订单 E -->
    <!-- 同一类别订单 S -->
    <div class="itme-con">
      <!-- 同一类别订单头部 S -->
      <div class="item-hd">
        <van-row>
          <van-col span="2">
            <div class="item-hd-con">
              <van-checkbox-group v-model="result">
                <van-checkbox v-for="(item, index) in list" :key="index" :name="item">
                  <img
                    slot="icon"
                    slot-scope="props"
                    :src="props.checked ? icon.active : icon.normal"
                  >
                </van-checkbox>
              </van-checkbox-group>
            </div>
          </van-col>
          <van-col span="22">
            <div class="flex-space-between item-hd-box">
              <div class>JD 京东自营店</div>
              <div>优惠券</div>
            </div>
          </van-col>
        </van-row>
      </div>
      <!-- 同一类别订单头部 E -->
      <!-- 订单列表头部 S -->
      <div class="item-bd-li-hd">
        <van-row>
          <van-col offset="2" span="22">
            <div class="flex-space-between item-bd-li-box">
              <div class>已购满99元，已减20元</div>
              <div class="red">再逛逛</div>
            </div>
          </van-col>
        </van-row>
      </div>
      <!-- 订单列表头部 E -->
      <!-- 订单列表 S -->
      <div class="item-bd">
        <div class="item-bd-li">
          <div class="item-bd-li-con">
            <van-row class="flex-space-between align-items-center">
              <van-col span="2">
                <van-checkbox-group v-model="result">
                  <van-checkbox v-for="(item, index) in list" :key="index" :name="item">
                    <img
                      slot="icon"
                      slot-scope="props"
                      :src="props.checked ? icon.active : icon.normal"
                    >
                  </van-checkbox>
                </van-checkbox-group>
              </van-col>
              <van-col span="22">
                <van-row>
                  <div class="flex-space-between pro-box">
                    <van-col span="6" class="img-wrap">
                      <img
                        src="https://m.360buyimg.com/babel/s268x268_jfs/t21064/86/2367874944/240021/6f967036/5b516f1bN4f4a3a7a.jpg!q70.dpg"
                        alt
                      >
                    </van-col>
                    <van-col span="18" class="pro-con flex-column flex-space-between">
                      <div class="pro-tit">HOO男童卫衣长袖T恤纯棉圆领上衣中大童字母打底衫儿童套头男童加绒卫衣 单层深蓝 160</div>
                      <div class="flex-space-between pro-info">
                        <div class="price">
                          ￥
                          <span class="num">129.00</span>
                        </div>
                        <div class="quantity">
                          <van-stepper v-model="value"/>
                        </div>
                      </div>
                    </van-col>
                  </div>
                </van-row>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
      <!-- 订单列表 S -->
    </div>
    <!-- 同一类别订单 E -->
  </div>
</template>
<script>
import checked from "@/assets/images/checked.png";
import Nuchecked from "@/assets/images/Nuchecked.png";
export default {
  data() {
    return {
      list: ["a"],
      result: [],
      icon: {
        normal: Nuchecked,
        active: checked
      },
      value: 0
    };
  }
};
</script>


<style >
.itme-con {
  margin: 10px 0;
}
.item-hd {
  line-height: 32px;
}

.item-hd-con {
}
.item-hd-box {
  font-size: #333;
  font-weight: bold;
}
.item-bd-li-box {
  padding-left: 12px;
  color: #c8c9cc;
}
.item-bd-li-hd {
  line-height: 32x;
  margin-bottom: 10px;
}
.img-wrap img {
  display: block;
  width: 100%;
}
.pro-con {
  height: inherit;
  padding-left: 10px;
}
.pro-box {
  background: #fff;
  padding: 12px 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.pro-tit {
  font-size: 12px;
  text-align: left;
  line-height: 20px;
}
.pro-info .price {
  font-size: 12px;
  color: #e93b3d;
}
.pro-info .price .num {
  font-size: 15px;
}
.item-bd {
  padding-left: 12px;
}
</style>
<style>
.van-checkbox__icon img {
  width: 16px;
  height: 16px;
}
</style>

